<template>
    <div>
      <HeaderComponent /> <!-- 顶部导航栏 -->
  
      <div id="BackLink">
        <router-link to="/main">Return to Main Menu</router-link>
      </div>
  
      <div id="Catalog">
        <table>
          <thead>
            <tr>
              <th>Product ID</th>
              <th>Product Name</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in product" :key="product.productId">
              <td>
                <router-link :to="`/product/${item.categoryId}/${item.productId}`">
                  {{ item.productId }}
                </router-link>
              </td>
              <td>{{ item.name }}</td>
            </tr>
          </tbody>
        </table>
      </div>
  
      <FooterComponent /> <!-- 底部信息 -->
    </div>
  </template>
  
  <script setup>
import { ref, onMounted ,watch} from 'vue';
import { searchProducts } from '@/api/search';
import { useRoute } from 'vue-router';
import "@/assets/css/global.css";
import HeaderComponent from '@/components/Header.vue';
import FooterComponent from '@/components/Footer.vue';

// 商品搜索结果

const product = ref([]);
const route = useRoute();

const fetchProducts = async () => {
  try {
    const response = await searchProducts(route.query.query); // 传关键词
    product.value = response.data.data || []; 
    console.log('Fetched products:', product.value);
    console.log('关键词是：', route.query.query);
  } catch (error) {
    console.error('Failed to fetch products:', error);
  }
};

// 初始加载 & 当路由参数变化时重新请求
onMounted(fetchProducts);
watch(() => route.query.query, fetchProducts);
</script>